<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>注册/登录</title>
    <link type="text/css" rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/style.css">
</head>
<body>
<form class="register uf uf-ver" action="#" method="post">
    <div>注册/登录&nbsp;&nbsp;<span class="txtSma">与手机号绑定</span></div>
    <input required id="telNumber" name="telNumber" minlength="11" maxlength="11" type="tel" placeholder="输入手机号"/>
    <div class="uf uf-ac codeLine">
        <input required id="codeInput" name="codeInput" class="uf-f" placeholder="验证码"/>
        <button type="button" id="getCode"><a href="javascript:getCode();">获取验证码</a></button>
    </div>
    <button type="submit" id="registerBtn">提交</button>
</form>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/jqToast.js"></script>
<script type="text/javascript" src="../static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="../static/js/tool.js"></script>
<script type="text/javascript">
    function getCode() {//获取验证码
        var telNumber = $("#telNumber").val();
        if (!telNumber) {
            warnAlert('请输入手机号码');
            return;
        }

        if (!(/^1(3|4|5|7|8)\d{9}$/.test(telNumber))) {
            warnAlert('请输入正确的11位手机号码');
            return;
        }

        //todo 发送验证码

        alert('发送验证码');

        //发送成功后回调计时
        setTime();

    }

    function setTime() {//验证码倒计时
        jqOpenToast('验证码已发送，请注意查收短信');
        var timeInit = 60;//验证码初始倒计时时限，单位秒
        var countdown = timeInit;//验证码初始倒计时计时器
        var e = $('#getCode');
        var eHtml = e.html();

        function down() {//验证码倒计时
            if (countdown == 0) {
                e.html(eHtml);
                e.removeAttr("disabled");
                countdown = timeInit;
                return;
            } else {
                e.html(countdown + '秒后重获');
                e.attr("disabled", "disabled");
                countdown--;
            }
            setTimeout(function () {
                down();
            }, 1000)
        }

        down();
    }


</script>
</body>
</html>